<template>
  <!-- 图片版，优点是表情可以用图片代替，缺点是不能用input框，只好用contenteditable做代替，样式，效果都要重新考虑 -->
  <div class="about">
    <vme @emojiSelected="emojiSected"></vme>
    <div class="editor" contenteditable="true" ref="editor" placeholder="默认文字"></div>
  </div>
</template>
<script>
import vme from "../components/vue-mobile-emoji/vme.vue";
export default {
  data() {
    return {
      isFocus: false
    };
  },
  components: {
    vme
  },
  methods: {
    // 光标到最后面
    keepLastIndex(obj) {
      if (window.getSelection) {
        //ie11 10 9 ff safari
        obj.focus(); //解决ff不获取焦点无法定位问题
        var range = window.getSelection(); //创建range
        range.selectAllChildren(obj); //range 选择obj下所有子内容
        range.collapseToEnd(); //光标移至最后
      } else if (document.selection) {
        //ie10 9 8 7 6 5
        var range = document.selection.createRange(); //创建选择对象
        //var range = document.body.createTextRange();
        range.moveToElementText(obj); //range定位到obj
        range.collapse(false); //光标移至最后
        range.select();
      }
    },
    // getSelection、createRange兼容
    isSupportRange() {
      return (
        typeof document.createRange === "function" ||
        typeof window.getSelection === "function"
      );
    },
    // 获取光标位置
    getCurrentRange() {
      let range = null;
      let selection = null;
      if (this.isSupportRange()) {
        selection = document.getSelection();
        if (selection.getRangeAt && selection.rangeCount) {
          range = document.getSelection().getRangeAt(0);
        }
      } else {
        range = document.selection.createRange();
      }
      return range;
    },
    // 插入内容
    insertHtmlAfterRange(html) {
      let selection = null;
      let range = null;
      if (this.isSupportRange()) {
        // IE > 9 and 其它浏览器
        selection = document.getSelection();
        if (selection.getRangeAt && selection.rangeCount) {
          let fragment, node, lastNode;
          range = selection.getRangeAt(0);
          range.deleteContents();
          let el = document.createElement("span");
          el.innerHTML = html;
          // 创建空文档对象,IE > 8支持documentFragment
          fragment = document.createDocumentFragment();

          while ((node = el.firstChild)) {
            lastNode = fragment.appendChild(node);
          }
          range.insertNode(fragment);

          if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
          }
        }
      } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
      }
    },
    emojiSected(emoji, base64) {
      this.$refs.editor.focus();
      let html =
        "<img style='width: 20px;display: inline-block;vertical-align: sub;' src='" +
        base64 +
        "' alt>";
      // this.$refs.editor.innerHTML += html;  // 添加表情的时候会整体闪一下，是因为每次都会重新渲染，所以有很大缺陷。
      // this.$refs.editor.append(html);// 添加表情的时候，html代码不会被识别。
      // this.$refs.editor.insertAdjacentHTML("beforeend", html); // 表情只会插入到最后面，放弃。
      this.insertHtmlAfterRange(html);
    }
  }
};
</script>
<style lang="scss" scoped>
.about {
  // placeholder 样式
  [contenteditable="true"]:empty::before {
    content: attr(placeholder);
    color: #ccc;
    caret-color: #ccc;
  }
  .editor {
    padding: 10px 0;
    text-align: left;

    caret-color: #333;
    color: #333;
  }
}
</style>